<template>
    <div>
        <div>
            <el-row>
                <!-- 商品父类id为0-->
                <el-col :span="12">
                    <div class="content">
                        <div class="charts"  ref="pur_chart1"> </div>
                    </div>
                </el-col>
                <!-- 商品父类id不为0-->
                <el-col :span="12">
                    <div class="content">
                        <div class="charts"  ref="pur_chart2"> </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 10px;padding-left: 20px">
            <el-row>
                <el-col :span="8">
                    <el-select v-model="timeValue" placeholder="请选择查看方式" width="100%" @change="change_watch()">
                        <el-option
                                v-for="item in options_time"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <!--                <el-col :span="8" v-if="timeValue != 3">-->
                <!--                    <el-select v-model="yearValue" value-key="value" placeholder="请选择年份" @change="change_year()" width="100%">-->
                <!--                        <el-option-->
                <!--                                v-for="item in options2"-->
                <!--                                :key="item.value"-->
                <!--                                :label="item.label"-->
                <!--                                :value="item">-->
                <!--                        </el-option>-->
                <!--                    </el-select>-->
                <!--                </el-col>-->
                <el-col :span="8">
                    <el-select v-model="changeValue" placeholder="请选择查看金额or数量" @change="change_x()" width="100%">
                        <el-option
                                v-for="item in options3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    const echarts = require('echarts');
    export default {
        name: "purchase_chart",
        data: function() {
            return {
                options_time:[
                    { value:1, label:"月度统计"},
                    { value:2, label:"季度统计"},
                    // { value:3, label:"年度统计"},
                ],
                timeValue:1,
                options2:[{
                    //这里要如何写年份？
                    value:1,
                    label:2020
                },{
                    //这里要如何写年份？
                    value:2,
                    label:2021
                }],
                yearValue:1,
                options3:[{
                    value:1,
                    label:"查看采购商品数量"
                }, {
                    value:2,
                    label:"查看采购商品金额"
                }],
                changeValue:1,
                year:"",
                //第一张图数据源名称
                purData:[],         //数据源
                data1:[],           //饼图分布数据
                elegend:[],
                eseries:[],
                timeData:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                //第二张图数据源
                eseriesName:"食品",
                pieName:"2020年1月",         //圆盘的title
                piedata:[],         //第一张图为月度统计时饼图里的数据源
                slegend:[],
                sseries:[],
                stimeData:[]
            }
        },
        methods:{
            //获取当前年份
            get_nowYear(){
                this.year = new Date().getFullYear();
            },
            //获取商品数据
            initData(){
                //首先要清空图表里的数据
                let sumNum = 0
                this.elegend = []
                this.eseries = []
                this.data1 = []
                this.axios.get("api/chart/firstChart",{params:{"timeValue":this.timeValue,"yearValue":this.year,"changeValue":this.changeValue}})
                    .then(v=>{
                        v.data.forEach(da1 => {
                            sumNum = sumNum + da1.sum
                        })
                        v.data.forEach(da2 => {
                            this.data1.push({
                                name:da2.proCName,
                                value:da2.sum/sumNum
                            })
                        })
                        //画好图
                        v.data.forEach(da3 => {
                            this.elegend.push({
                                name:da3.proCName,
                                icon:'circle'
                            })
                            this.eseries.push({
                                name:da3.proCName,
                                type: 'bar',
                                data:da3.arrData
                            })
                        })
                        this.initChart1()
                    }).catch()
            },
            //第二张图的数据
            sinitData(timeNum){
                let sumNum = 0;
                this.slegend=[];
                this.sseries=[];
                this.stimeData=[];
                this.axios.get("api/chart/seccondChart",{params:{"name":this.eseriesName,"monNum":timeNum,"timeValue":this.timeValue,"yearValue":this.year,"changeValue":this.changeValue}})
                    .then(v=>{
                        v.data.forEach(da1 => {
                            sumNum = sumNum + da1.sums
                        })
                        if(this.timeValue === 1 || this.timeValue === 2){
                            v.data.forEach(es=>{
                                this.piedata = [];
                                this.piedata.push({
                                    name:es.namesn,
                                    value:(es.sums/sumNum).toFixed(2)
                                })
                            })
                        }else if(this.timeValue === 3){
                            v.data.forEach(fe=>{
                                this.slegend.push({
                                    name:fe.namesn,
                                    icon:'circle'
                                })
                                this.sseries.push({
                                    name:fe.namesn,
                                    type: 'bar',
                                    data:fe.arrData
                                })
                            })
                        }
                        this.initChart2()
                    }).catch()
            },
            //改变selection1调用的方法
            change_watch(){
                if (this.timeValue === 1){
                    this.timeData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }else if(this.timeValue === 2){
                    this.timeData = ['1季度', '2季度', '3季度', '4季度']
                }else if(this.timeValue === 3){
                    this.timeData = ['第一季度', '第二季度', '第三季度', '第四季度']
                }
                this.initData();
                this.piedata = [];
                this.pieName = "2020年1月";
                this.sinitData(1);
            },
            //改变selection2调用的方法,push进series
            change_x(){
                this.initData();
                this.sinitData(1);
            },
            change_year(){

            },
            initChart1(){
                let myChart = echarts.init(this.$refs.pur_chart1);
                let thit = this;
                myChart.on('click',function(params){
                    thit.pieName = thit.year+"年"+params.seriesName+params.name;
                    let timeNum = parseInt(params.name.substr(0,1));
                    if(thit.timeValue === 3){
                        timeNum = 0
                        thit.pieName = thit.year+"年";
                    }
                    thit.eseriesName = params.seriesName;
                    thit.sinitData(timeNum)
                });
                myChart.setOption({
                    title: {
                        text: '产品采购图',
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    legend: {
                        bottom:10,
                        data:this.elegend
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: this.timeData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series:this.eseries,
                })
            },
            initChart2(){
                let myChart = echarts.init(this.$refs.pur_chart2);
                if (this.timeValue === 1 || this.timeValue === 2){
                    //使用圆饼图表
                    this.init
                    myChart.setOption({
                        title:{
                            text:this.pieName+'详情',
                        },
                        tooltip: {
                            trigger:'axis',
                            formatter: "{a} <br/>{b} : {c}"
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                restore: {show: true}
                            }
                        },
                        series:{
                            name: '详细数据',
                            type: 'pie',
                            radius: '55%',
                            data:this.piedata,
                        },
                    })
                }else{
                    //使用现有图表
                    myChart.setOption({
                        title: {
                            text: this.pieName+'详情',
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: "{a} <br/>{b} : {c}"
                        },
                        legend: this.elegend,
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series:this.eseries,
                    })
                }
            },
        },
        created:function() {
            this.get_nowYear()
            this.initData()
        },
    }
</script>

<style scoped>
    .content {margin: 0px 20px 10px 20px;background: #fcfbfd;min-height:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .charts{
        padding-top: 10px;
        width: 100%;
        min-height: 430px;
    }
</style>